<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <div id="vuebox">
        <!--分类-->
        <div class="row">
            <div class="col-md-6 col-lg-6">
                <form class="form-inline" role="form" style="padding-left: 250px;">
                    <div class="form-group" style="padding-left: 20px;">
                        <label>请输入查询关键字:</label>
                        <select class="form-control" v-model="classid">
                            <option value="0">全部</option>
                            <option v-for="item in classlist.data" :value="item.id">{{item.cname}}</option>
                        </select>
                    </div>
                    <div class="form-group"  style="padding-left: 20px;">
                        <button type="button" class="btn btn-primary" @click="selbtn()">查询</button>
                    </div>

                </form>
            </div>
            <div class="col-md-6 col-lg-6 text-right">
                <a href="javascript:void(0)" @click="openAdd()" class="btn btn-primary">添加常见问题</a>
            </div>
        </div>
        <!--图书列表-->
        <div class="row">
            <div class="col-md-12" v-if="faqslist.data.size">
                <br/>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>标题</th>
                        <th>分类</th>
                        <th>创建日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in faqslist.data.list" >
                        <td>{{item.id}}</td>
                        <td><a href="javascript:void(0)" @click="opensel(item.id)">{{item.title}}</a></td>
                        <td>{{item.cname}}</td>
                        <td>{{item.createdate|formatDate}}</td>
                    </tr>
                    </tbody>
                </table>
                <br/>
            </div>
            <div class="col-md-12 text-center" v-if="!faqslist.data.size">
                <h1>抱歉,没有查询到数据</h1>
            </div>
        </div>

        <!--上一页下一页-->
        <div class="row">
            <div class="col-md-12" align="center">
                <ul class="pagination ">
                    <li v-show="faqslist.data.hasPreviousPage"><a href="javascript:void(0)" @click="prev()">&laquo;</a></li>
                    <li :class="{active:faqslist.data.pageNum==i}" v-for="i in faqslist.data.navigatepageNums">
                        <a href="javascript:void(0)"  @click="inpage(i)">{{i}}</a>
                    </li>
                    <li v-show="faqslist.data.hasNextPage"><a href="javascript:void(0)" @click="next()">&raquo;</a></li>
                </ul>
            </div>
        </div>

        <!-- 添加模态框-->
        <div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">添加常见问题</h4>
                    </div>
                    <div class="modal-body">
                        <label>分类:</label>
                        <select  v-model="faqs.classid">
                            <option value="0">全部</option>
                            <option v-for="item in classlist.data" :value="item.id">{{item.cname}}</option>
                        </select><br/>
                        <label>标题:</label>
                        <input type="text" class="form-control" @blur="seltitle(faqs.title)" v-model="faqs.title" id="title"/><br/>
                        <label>内容:</label>
                        <textarea class="form-control" v-model="faqs.content" rows="3"></textarea>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-primary" @click="add()">保存</a>

                        <button type="button" class="btn btn-default" data-dismiss="modal" >返回</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- 根据id查询模态框-->
        <div class="modal fade" id="selModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel2">常见问题检索</h4>
                    </div>
                    <div class="modal-body">
                        <label>分类:</label>
                        <p>{{faqs.cname}}</p>
                        <label>添加日期</label>
                        <p>{{faqs.createdate|formatDate}}</p>
                        <label>标题:</label>
                        <p>{{faqs.title}}</p>
                        <label>内容:</label>
                        <textarea class="form-control" v-model="faqs.content" rows="3"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" >返回</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
    </div>
</div>

</body>
</html>
<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#vuebox",
        data:{
            pageNum:1,
            pageSize:2,
            pagelist:1,//页数
            classid:0,//分类编号
            classlist:[],//分类集合
            faqslist:[],
            faqs:{id:null,classid:0,cname:null,title:"",createdate:null,content:""}
        },mounted() {
            axios.post("/getSelectClasses").then(res => {this.classlist = res.data});
            this.queryAll();
        },methods:{
            queryAll:function () {
                axios({url:"/getSelectFaqsByclassid", method:"post", params:{classid:this.classid, pageNum:this.pageNum, pageSize:this.pageSize}}).then(res=>{this.faqslist=res.data})
            },
            prev:function () {//上一页
                this.pageNum +=-1;
                this.queryAll();
            },
            next:function () {//下一页
                this.pageNum+=+1;
                this.queryAll();
            },
            inpage:function (i) {//页数跳转
                this.pageNum=i;
                this.queryAll();
            }
            ,
            selbtn:function () {
                this.queryAll();
            },
            openAdd:function () {
                this.faqs={id:null,classid:0,cname:null,title:"",createdate:null,content:""}
                $("#AddModal").modal("show");
            },
            opensel:function(id){
                axios({url:"/SelectByid", method:"post", params:{id:id}}).then(res=>{this.faqs=res.data.data})
                $("#selModal").modal("show");
            },
            add:function () {
                axios.post("/savefaq",this.faqs)
                    .then(res=>{
                        if(res.data.result="SUCCESS"){
                            alert("添加成功!!");
                            $("#AddModal").modal("hide");
                            this.faqs={id:null,classid:0,cname:null,title:"",createdate:null,content:""}
                            this.queryAll();
                        }else{
                            alert("添加失败!!");
                            this.faqs={id:null,classid:0,cname:null,title:"",createdate:null,content:""}
                            this.queryAll();
                        }
                    })

            },

            seltitle:function (title) {
                axios({url:"/SelectBytitle", method:"post", params:{title:title}})
                    .then(res=>{
                        if(res.data.data!=null){
                            alert("不可用");
                            this.faqs.title='';
                        }else{
                            alert("可用!");
                        }
                    })
            }
        },filters: {
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d /*+ ' ' + h + ':' + m + ':' + s*/;
            }

        }


    })

    // 数字补0操作
    function  addZero(num) {
        return num < 10 ? '0' + num : num;
    }

    function formatDateTime (date) {
        var time = new Date(Date.parse(date));
        time.setTime(time.setHours(time.getHours() + 8));
        var Y = time.getFullYear() + '-';
        var  M = this.addZero(time.getMonth() + 1) + '-';
        var D = this.addZero(time.getDate()) + '';
        return Y + M + D;
        // }
    }
</script>